<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制点</title>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script type="notjs" id="vertext">
        attribute vec2 a_position;
        attribute vec4 a_color;
        uniform vec2 screenSize;
        varying vec4 v_color;

        void main() {
           float x = a_position.x * 2.0 / screenSize.x - 1.0;
           float y = 1.0 - (a_position.y * 2.0 / screenSize.y);
           gl_Position = vec4(x, y, 0.0, 1.0);
           gl_PointSize = 10.0;
           v_color = a_color;
        }
    </script>
    <script type="notjs" id="fragment">
        precision mediump float;
        varying vec4 v_color;

        void main() {
            gl_FragColor = v_color;
        }

    </script>

    <script>
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl');

        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);

            if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                return shader;
            }

            console.error('Error compiling shader:', gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, document.getElementById('vertext').textContent);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, document.getElementById('fragment').textContent);

        function createProgram(gl, vertexShader, fragmentShader) {
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
                return program;
            }

            console.error('Error linking program:', gl.getProgramInfoLog(program));
            gl.deleteProgram(program);
        }

        const program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        const a_position = gl.getAttribLocation(program, 'a_position');
        const a_color = gl.getAttribLocation(program, 'a_color');
        const screenSize = gl.getUniformLocation(program, 'screenSize');

        gl.uniform2f(screenSize, canvas.width, canvas.height);

        function randomColor() {
            return {
                r: Math.random(),
                g: Math.random(),
                b: Math.random(),
                a: 0.5 + Math.random() * 0.5
            }
        }
    
        function clearCanvas() {
            gl.clearColor(0.53, 0.81, 0.92, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);
        }
    
        function bindEvent() {
            const points = [];
            canvas.onmousedown = function(e) {
                clearCanvas();
                points.push({
                    x: e.offsetX,
                    y: e.offsetY,
                    color: randomColor()
                });
                points.forEach((point) => {
                    const color = point.color;
                    gl.vertexAttrib2f(a_position, point.x, point.y);
                    gl.vertexAttrib4f(a_color, color.r, color.g, color.b, color.a);
                    gl.drawArrays(gl.POINTS, 0, 1);
                });
            }
        }

        // 初始化画布颜色
        clearCanvas();

        bindEvent();

    </script>
</body>

</html>
